<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统登录</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0d6efd',
                        secondary: '#6c757d',
                        accent: '#dc3545',
                        light: '#f8f9fa',
                        dark: '#212529'
                    },
                    fontFamily: {
                        inter: ['Segoe UI', 'Microsoft YaHei', 'Arial', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
            }
            .card-hover {
                @apply hover:shadow-xl transition-all duration-500;
            }
        }
    </style>
</head>
<body class="font-inter bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center justify-center p-4">
    <!-- 登录卡片 -->
    <div class="w-full max-w-md">
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover">
            <!-- 卡片头部 -->
            <div class="bg-primary p-6 text-center relative overflow-hidden">
                <!-- 装饰元素 -->
                <div class="absolute top-0 left-0 w-full h-full opacity-10">
                    <div class="absolute -top-6 -left-6 w-24 h-24 rounded-full bg-white"></div>
                    <div class="absolute top-1/3 -right-8 w-16 h-16 rounded-full bg-white"></div>
                    <div class="absolute -bottom-4 left-1/4 w-20 h-20 rounded-full bg-white"></div>
                </div>
                
                <h1 class="text-[clamp(1.5rem,4vw,2rem)] font-bold text-white relative z-10">欢迎登录</h1>
                <p class="text-blue-100 mt-2 relative z-10">请输入账号信息访问系统</p>
            </div>
            
            <!-- 登录表单 -->
            <div class="p-6">
                <form id="loginForm" class="space-y-5">
                    <!-- 用户名输入 -->
                    <div class="space-y-2">
                        <label for="username" class="block text-sm font-medium text-gray-700">
                            <i class="fa fa-user-circle-o mr-1"></i>用户名
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                <i class="fa fa-user"></i>
                            </div>
                            <input type="text" id="username" name="username" 
                                class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg form-input-focus transition-all"
                                placeholder="请输入用户名" required>
                        </div>
                    </div>
                    
                    <!-- 密码输入 -->
                    <div class="space-y-2">
                        <div class="flex justify-between items-center">
                            <label for="password" class="block text-sm font-medium text-gray-700">
                                <i class="fa fa-lock mr-1"></i>密码
                            </label>
                            <a href="#" class="text-sm text-primary hover:text-primary/80 transition-colors">
                                忘记密码?
                            </a>
                        </div>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                <i class="fa fa-key"></i>
                            </div>
                            <input type="password" id="password" name="password" 
                                class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg form-input-focus transition-all"
                                placeholder="请输入密码" required>
                            <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 transition-colors">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 记住我选项 -->
                    <div class="flex items-center">
                        <input type="checkbox" id="remember" name="remember" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                        <label for="remember" class="ml-2 block text-sm text-gray-700">
                            记住我
                        </label>
                    </div>
                    
                    <!-- 登录按钮 -->
                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg btn-hover active:translate-y-0">
                        <i class="fa fa-sign-in mr-2"></i>登录
                    </button>
                    
                    <!-- 注册链接 -->
                    <div class="text-center text-sm text-gray-600">
                        还没有账号? <a href="#" class="font-medium text-primary hover:text-primary/80 transition-colors">立即注册</a>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 页脚 -->
        <div class="mt-6 text-center text-sm text-gray-500">
            <p>&copy; 2023 系统名称. 保留所有权利.</p>
        </div>
    </div>

    <script>
        // 密码显示/隐藏切换
        const togglePassword = document.getElementById('togglePassword');
        const password = document.getElementById('password');
        
        togglePassword.addEventListener('click', function() {
            // 切换类型
            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);
            
            // 切换图标
            this.querySelector('i').classList.toggle('fa-eye');
            this.querySelector('i').classList.toggle('fa-eye-slash');
        });
        
        // 表单提交处理
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const remember = document.getElementById('remember').checked;
            
            // 这里可以添加登录验证逻辑
            console.log('登录信息:', { username, password, remember });
            
            // 模拟登录成功
            alert('登录功能将在后端实现，当前仅作展示');
        });
        
        // 添加输入框动画效果
        const inputs = document.querySelectorAll('input');
        inputs.forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.classList.add('scale-[1.01]');
                this.parentElement.style.transition = 'transform 0.3s ease';
            });
            
            input.addEventListener('blur', function() {
                this.parentElement.classList.remove('scale-[1.01]');
            });
        });
    </script>
</body>
</html>
